<template>
    <div class="tab-bar-item" @click="changeRoute">
        <div v-if="!Active"><slot name="item-icon"></slot></div>
        <div v-else><slot name="item-icon-active"></slot></div>
        <div :style="activeStyle"><slot name="item-text"></slot></div>
    </div>
</template>

<script>
    export default {
          props: {
                path: {
                    type: String,
                },
                activeColor:{
                    type:String,
                    default:'#121639'
                },
                fontSize:{
                    type:String,
                    default:'14px'
                }
            },
        computed: {
          
            Active() {
                return this.$route.path.indexOf(this.path) !== -1
            },
            activeStyle(){
                return this.Active?{color:this.activeColor,fontSize:this.fontSize}:{color:'#c5c9d5',fontSize:this.fontSize}
            }
        },
        methods: {
            changeRoute() {
                    this.$router.push(this.path)      
            }
        },
    }
</script>

<style scoped>
    .tab-bar-item{
        flex: 1;
        margin-top: 25px;
    }
    .tab-bar-item img{
        width: 20px;
        height: 20px;
    }

</style>